<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>订单详情</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../../include/commonFile.jsp" %>
    <style type="text/css">
        .main-bottom .prod-logo {
            width: 60px;
            height: 60px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            float: left;
            margin-right: 5px;
        }

        .main-bottom .parcel-item {
            background-color: #f2f2f2 !important;
        }

        .line {
            height: 10px;
        }
    </style>

    <style type="text/css">
        .ui-step {
            padding: 15px 0px;
            zoom: 1;
            display: flex;
        }

        .ui-step-4 li {
            flex: 1;
        }

        .ui-step li {
            float: left;
            position: relative;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
        }

        .ui-step li:first-child::before {
            width: 0px;
        }

        .ui-step li:last-child::after {
            width: 0px;
        }

        .ui-step li::before, .ui-step li::after {
            position: absolute;
            left: 0;
            top: 36px;
            display: block;
            content: ' ';
            width: 50%;
            height: 4px;
            background: #999;
            z-index: 1;
        }

        .ui-step li.ui-step-done .ui-step-title {
            color: #e8473f;
        }

        .ui-step .ui-step-title {
            color: #999;
            font-size: 12px;
            font-weight: bold;
            line-height: 18px;
        }

        .ui-step li.ui-step-done .ui-step-number {
            color: transparent;
        }

        .ui-step .ui-step-number {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 10px 0;
            line-height: 22px;
            background: #999;
            color: #fff;
            border-radius: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 2;
        }

        .ui-step li.ui-step-done .ui-step-number::after {
            position: absolute;
            left: 0px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            content: '√';
            color: #fff;
            font-family: serif;
        }

        .ui-step .ui-step-meta {
            color: #ccc;
        }

        .ui-step li.ui-step-done::before, .ui-step li.ui-step-done::after, .ui-step li.ui-step-done .ui-step-number {
            background: #e8473f;
        }

        .ui-step li::after {
            left: 50%;
        }

        .step-region {
            position: relative;
            margin-bottom: 15px;
        }

        .main-top, .main-middle {
            border: 1px solid #e5e5e5;
        }

        .ui-step:after {
            content: "";
            display: table;
            clear: both;
        }

        .main-middle-left, .main-middle-right {
            float: left;
            padding: 10px;
            line-height: 35px;
        }

        .main-middle-left {
            border-right: 1px solid #e5e5e5;
            width: 400px;
        }

        .main-middle-right {
            width: 50%;
        }
    </style>
</head>
<body>
!--头部-->
<%@include file="../../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="main-top mt20 step-region">
                <ul class="ui-step ui-step-4">
                    <li class="ui-step-done">
                        <div class="ui-step-title">买家下单</div>
                        <div class="ui-step-number">1</div>
                        <div class="ui-step-meta"><fmt:formatDate value="${outputPay.createDate}"
                                                                  pattern="yyyy-MM-dd HH:mm:ss"/></div>
                    </li>
                    <li ${not empty payDate || type == 2 ? 'class="ui-step-done"' : ''}>
                        <div class="ui-step-title">买家付款</div>
                        <div class="ui-step-number">2</div>
                        <div class="ui-step-meta"><fmt:formatDate value="${payDate}"
                                                                  pattern="yyyy-MM-dd HH:mm:ss"/></div>
                    </li>
                    <li ${not empty outputPay.shipmentDate || type == 2 ? 'class="ui-step-done"' : ''}>
                        <div class="ui-step-title">商家发货</div>
                        <div class="ui-step-number">3</div>
                        <div class="ui-step-meta"><fmt:formatDate value="${outputPay.shipmentDate}"
                                                                  pattern="yyyy-MM-dd HH:mm:ss"/></div>
                    </li>
                    <li ${not empty outputPay.completeDate || type == 2 ? 'class="ui-step-done"' : ''}>
                        <div class="ui-step-title">交易完成</div>
                        <div class="ui-step-number">4</div>
                        <div class="ui-step-meta"><fmt:formatDate value="${outputPay.completeDate}"
                                                                  pattern="yyyy-MM-dd HH:mm:ss"/></div>
                    </li>
                </ul>
            </div>
            <div class="main-middle">
                <div class="main-middle-left">
                    <div><strong>订单信息</strong></div>
                    <div>订单编号：${outputPay.orderId}</div>
                    <c:if test="${not empty transactionId}">
                        <div>交易单号：${transactionId}</div>
                    </c:if>
                    <div style="line-height: 30px">
                        <span class="l">买家：</span>
                        <div class="member-cell" style="float: left; width: calc(100% - 50px);"
                             onclick="openDialogShow('用户名片','${ctx}/system/member/memberView.do?id=${buyer.id}','400px','470px')">
                            <div class="member-logo"
                                 style="background-image: <c:if test="${buyer.logo != null}">url('${buyer.logo}?imageMogr2/auto-orient/crop/126x126'),</c:if>url(${ctx}/image/def_user_logo.png)"></div>
                            <div class="member-name ellipsis-1">
                                <a title="${buyer.realname}"
                                   href="javascript:void(0);">${buyer.realname}</a>
                            </div>
                        </div>
                        <div class="cl"></div>
                    </div>
                    <div>收货信息：${outputPay.addressFull}</div>
                    <div>买家留言：${not empty outputPay.buyerRemarks ? outputPay.buyerRemarks : '--'}</div>
                </div>
                <div class="main-middle-right">
                    <div>
                        <div><strong>订单状态：${outputPay.statusName}</strong></div>
                        <div>
                            <c:if test="${outputPay.status == 3}">
                                <a class="red" href="javascript:void(0);" onclick="doShopment('${outputPay.orderId}', null)" >发货</a>
                            </c:if>
                            <c:if test="${outputPay.status == 4}">
                                <a class="red" href="javascript:searchShopment('${outputPay.orderId}')">修改物流</a>
                            </c:if>
                            <a href="javascript:void(0)" class="red"
                               onclick="updateSellerRemarks2('${outputPay.orderId}', this)">备注</a>
                        </div>
                    </div>
                    <div style="border-top: 1px dashed #e5e5e5; ${empty outputPay.sellerRemarks ? 'display:none' : ''}"
                         class="seller-remarks-div">
                        卖家备注：<span class="seller-remarks">${outputPay.sellerRemarks}</span>
                    </div>
                </div>
                <div class="cl"></div>
            </div>
            <c:set var="totalQuantity" value="0" scope="page" />
            <c:set var="totalPrice" value="0" scope="page" />
            <c:set var="hasChildren" value="false" scope="page" />
            <div class="main-bottom">
                <table class="layui-table" lay-skin="line">
                    <colgroup>
                        <col width="100px">
                        <col>
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="10%">
                        <col width="10%">
                    </colgroup>
                    <thead>
                    <tr>
                        <td></td>
                        <td>商品</td>
                        <td>价格（元）</td>
                        <td>数量</td>
                        <td>小计（元）</td>
                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="orderParent" items="${notShipmentOrderDetails}" varStatus="st">
                        <c:if test="${fn:length(orderParent.childrens) > 0}">
                            <c:set var="hasChildren" value="true" scope="page" />
                            <tr>
                                <td colspan="7">
                                    <c:if test="${empty orderParent.distributorId}">
                                        <span>所属者：${orderParent.distributorName}</span>
                                    </c:if>
                                    <c:if test="${not empty orderParent.distributorId}">
                                        <span class="mr15 red">分销者：${orderParent.distributorName}</span>
                                    </c:if>
                                </td>
                            </tr>
                            <c:forEach var="item" items="${orderParent.childrens}">
                                <tr class="detail-item">
                                    <td>
                                        <div class="prod-logo" style="background-image: url('${item.pic}')"></div>
                                    </td>
                                    <td>
                                        <div>
                                            <div class="ellipsis-2 mb5" title="${item.name}">${item.name}</div>
                                            <div class="ellipsis-1 mb5" title="${item.specValues}">${item.specValues}</div>
                                            <c:if test="${not empty item.productNumber}">
                                                <div>规格编码：<span class="red">${item.productNumber}</span></div>
                                            </c:if>
                                        </div>
                                    </td>
                                    <td>
                                        <div><fmt:formatNumber value="${item.price}" pattern="0.00"/></div>
                                    </td>
                                    <td>
                                        <div>${item.quantity}</div>
                                    </td>
                                    <td>
                                        <div>${item.price * item.quantity}</div>
                                        <c:set var="totalPrice" value="${totalPrice + (item.price * item.quantity)}"/>
                                    </td>
                                    <td>
                                        <div>${item.statusName}</div>
                                    </td>
                                    <td>
                                        <c:if test="${item.status == 6}">
                                            <div class="hasApplyRefund">
                                                <a class="red db" href="javascript:checkRefund('${item.id}', 1)">同意退款</a>
                                                <a class="red db" href="javascript:checkRefund('${item.id}', 2)">拒绝退款</a>
                                            </div>
                                        </c:if>
                                        <c:if test="${item.status == 9}">
                                            <p>退款成功</p>
                                        </c:if>
                                        <c:if test="${item.status == 5}">
                                            <p>退款拒绝</p>
                                            <a class="red db" href="javascript:checkRefund('${item.id}', 1)">同意退款</a>
                                        </c:if>
                                    </td>
                                </tr>
                            </c:forEach>
                            <c:if test="${fn:length(notShipmentOrderDetails) != st.count}">
                                <tr>
                                    <td colspan="7" class="line"></td>
                                </tr>
                            </c:if>
                        </c:if>
                    </c:forEach>
                    <c:if test="${fn:length(shipments) > 0 && fn:length(notShipmentOrderDetails) > 0 && hasChildren}">
                        <tr>
                            <td colspan="7" class="line"></td>
                        </tr>
                    </c:if>
                    <c:forEach var="item" items="${shipments}" varStatus="st">
                        <tr class="parcel-item">
                            <td><strong>包裹 - ${st.count}</strong></td>
                            <td>
                                <div>
                                    <span class="mr10">${item.courierName}</span>
                                    <span class="mr10">${item.courierNumber}</span>
                                    <span><fmt:formatDate value="${item.createDate}" pattern="yyyy-MM-dd HH:mm"/></span>
                                </div>
                            </td>
                            <td colspan="5">
                                <c:if test="${empty item.acceptStation}">
                                    <a class="red mr10"
                                       href="javascript:openDialogShow('物流详情', '${ctx}/logistics/logistics/findLogisticsById.do?logisticsId=${item.logisticsId}','800px', '600px')">查看物流信息</a>
                                </c:if>
                                <c:if test="${not empty item.acceptStation}">
                                    <div style="display: inline-block; margin-right: 10px">物流状态：${item.statusName}</div>
                                    <div style="display: inline-block">
                                        <span class="red mr10">${item.acceptStation}</span>
                                        <a href="javascript:openDialogShow('物流详情', '${ctx}/logistics/logistics/findLogisticsById.do?logisticsId=${item.logisticsId}','800px', '600px')">更多</a>
                                    </div>
                                </c:if>
                            </td>
                        </tr>
                        <c:forEach var="child" items="${item.childrens}">
                            <tr>
                                <td>
                                    <div class="prod-logo" style="background-image: url('${child.pic}')"></div>
                                </td>
                                <td>
                                    <div>
                                        <div class="ellipsis-2 mb5" title="${child.title}">${child.title}</div>
                                        <div class="ellipsis-1 mb5" title="${child.specValues}">${child.specValues}</div>
                                        <c:if test="${not empty child.productNumber}">
                                            <div>规格编码：<span class="red">${child.productNumber}</span></div>
                                        </c:if>
                                    </div>
                                </td>
                                <td>
                                    <div><fmt:formatNumber value="${child.price}" pattern="0.00"/></div>
                                </td>
                                <td>
                                    <div>${child.quantity}</div>
                                </td>
                                <td>
                                    <div>${child.price * child.quantity}</div>
                                    <c:set var="totalPrice" value="${totalPrice + (child.price * child.quantity)}"/>
                                </td>
                                <td>
                                    <div>${child.statusName}</div>
                                </td>
                                <td>
                                    <c:if test="${child.status == 6}">
                                        <div>
                                            <a class="red db" href="javascript:checkRefund('${child.id}', 1)">同意退款</a>
                                            <a class="red db" href="javascript:checkRefund('${child.id}', 2)">拒绝退款</a>
                                        </div>
                                    </c:if>
                                </td>
                            </tr>
                        </c:forEach>
                        <c:if test="${fn:length(shipments) != st.count}">
                            <tr>
                                <td colspan="7" class="line"></td>
                            </tr>
                        </c:if>
                    </c:forEach>
                    <tr>
                        <td colspan="7" class="line"></td>
                    </tr>
                    <tr>
                        <td colspan="7">
                            <span class="ml10">订单共${outputPay.quantity}件商品，总计：
                                <span class="red">
                                    ￥<fmt:formatNumber value="${totalPrice + outputPay.postage}" pattern="0.00"/>
                                </span>
                                <c:if test="${outputPay.postage > 0}">
                                    （含运费：<fmt:formatNumber value="${outputPay.postage}" pattern="0.00"/>）
                                </c:if>
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <%@include file="../../include/footer.jsp" %>
    </section>
    <div id="selectOrderDetail" class="p10"></div>
    <form id="searchShipment" class="p10 layui-form"></form>
    <jsp:include page="includeSellerRemarks.jsp"/>
</div>
<jsp:include page="includeShipment.jsp"/>
<jsp:include page="includeSearchShipment.jsp"/>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript">
    var form, laytpl = null;

    txz.initHeader({
        nav: [{
            name: '订单管理'
        }, {
            name: '订单详情',
            curr: true
        }],
        btns: [{
            name: '返回',
            href: 'javascript:history.back();',
            icon: 'back'
        }]
    });

    function openDialog(title, content, width, height, cb, target) {
        var index = layer.open({
            type: 1,
            area: [width, height],
            title: title,
            maxmin: true, //开启最大化最小化按钮
            content: $(content),
            btn: ['确定', '取消'],
            yes: function () {
                cb(index);
            }
        });
    }

    // 退款审核
    function checkRefund(orderDetailId, status) {
        var msg = "";
        if (status == 1) {
            msg = "确认同意退款？";
        } else if (status == 2) {
            msg = "确认拒绝退款？";
        }
        layer.confirm(msg, {
            icon: 3,
            title: '系统提示'
        }, function (index) {
            $.post("${ctx}/mall/order/checkRefund.do", {
                "orderDetailId": orderDetailId,
                "status" : status
            }, function (data) {
                if (data.success) {
                    util.layerMsgSuccess("退款成功！", function () {
                        window.location.reload();
                    });
                } else {
                    util.layerMsgError(data.description)
                }
                top.layer.close(index);
            });
        });
    }

    $(function () {
        layui.use(['form', 'laytpl'], function () {
            form = layui.form, laytpl = layui.laytpl;
        });
    })
</script>
</body>
</html>
